CSS Links

In this tutorial you will learn how to style different states of a link using CSS.

Links or hyperlinks are an essential part of a website. It allows visitors to navigate through the site. Therefore, styling the links properly is an important aspect of building a user-friendly website.

A link has four different states — link, visited, active and hover . These four states of a link can be styled differently through using the following anchor pseudo-class selectors.

• a:link — define styles for normal or unvisited links.
• a:visited — define styles for links that the user has already visited.
• a:hover — define styles for a link when the user place the mouse pointer over it.
• a:active — define styles for links when they are being clicked.

The order of the pseudo classes should be the following — :link, :visited, :hover, :active, :focus in order for these to work properly.

Example: Try It

a:link {    /* unvisited link */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {    /* visited link */
    color: #ff00ff;
}
a:hover {    /* mouse over link */
    color: #00ff00;
    border-bottom: none;
}
a:active {    /* active link */
    color: #00ffff;
}